/* Reader */

* {
  font-size: 16px;
  font-family: Tahoma;
}
body {background: #27344d;}
hr.clear {
  visibility: hidden;
  clear: both;
  margin: 0;
}

#container {
  width: 98%;
  margin: 20px auto;
}
h1, h2, h3, h4, h5, h6 {
 margin: 5px 0;
}
h1, h1 a {
 font-size: 200%;
}
h2, h2 a {
 font-size: 180%;
}
h3, h3 a {
 font-size: 160%;
}
h4, h4 a {
 font-size: 140%;
}
h5, h5 a {
 font-size: 120%;
}
h6, h6 a {
 font-size: 100%;	
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 text-decoration: none;
}
h1 .rating, h2 .rating {
 margin-left: 20px;
}
table {
 width: 100%;
}
table a {
 text-decoration: none;
 color: black;
}
tr:hover, tr:focus {
 background: #d2f2b7;
}
table thead {
 border-bottom: 1px solid black;
}
thead td{
 line-height: 1.5em;
 font-weight: bold;
}
.rating {
 vertical-align: middle;
}
/* LINKS **************************************************************/
a {
  color: #006600;
  text-decoration: underine;
}
a:hover,a:focus {
  color: white;
  background: #006600;
  text-decoration: none;
}
/* FORMS **************************************************************/
fieldset {
  border: 0;
  background: #d2f2b7;
  padding: 0 10px 10px 10px;
  margin: 10px 0;
}
legend {
  margin-bottom: 10px;
  border: 0;
  background: #c6c6c6;
  font-weight: bolder;
  padding: 5px 10px;
}
input[type="text"],input[type="password"], textarea {
  border: 1px solid #d2f2b7;
  background: #ffffff;
}
input[type="text"]:focus,input[type="password"]:focus, textarea:focus {
  border-color: #0066cc;
}
textarea {
  width: 100%;
  height: 100px;
}
input[type="text"],input[type="password"], option {
  width: 200px;
}
label {
  font-size: small;
  margin-left: 10px;
}
input[type="submit"] {
  float: right;
}
/* HEADER *************************************************************/
#header { 
 background: #d2f2b7;
 clear: both;
 margin: 0;
}
/* HEADER-LEFT ********************************************************/
#header-left {
 width: 70%;
 float: left;
 background: url('./../image/header1.png') repeat-x;
 min-height: 140px;
 margin: 0;
}
/* LOGO ***************************************************************/
#logo {
 display: block;
 height: 55px;
 float: left;
 width: 159px;
 background: url('./../image/logo.png') no-repeat;
}
/* LOGIN **************************************************************/
#login {
 min-height: 140px;
 background: url('./../image/header2.png');
 margin: 0;
 float: right;
 width: 30%;
}
#login fieldset {
 background: url('./../image/header2.png') repeat-x;
 border: none;
 margin: 0;
 padding-top: 10px;	
}
#login label {
 font-size: 0.8em;
}
#login input[type="text"],#login input[type="password"] {
 border: none;
 width: 60%;
}
#login input[type="submit"] {
 float: none;
 margin: 0;
 margin-top: 5px;
}
#login a {
 color: black;
}
#login a:hover, #login a:focus {
 color: white;
}
#login p {
 margin-bottom: 0;
 margin-left: 10px;
}
#login p.link {
 margin-top: 0;
}
#login h1 {
 margin: 10px;
 font-size: 16px;
}
/* MENU ***************************************************************/
#menu {	
 display: block;
 margin: 0;
 padding: 0;
}
#menu li {
 display: block;
 float: left;
 padding: 0;
 height: 36px;
}
#menu li a {
 color: white;
 font-variant: small-caps;
 font-size: 1em;
 text-decoration: none;
 display: block;
 padding: 10px;
 text-align: center;
 width: 120px;
}
#menu li a:hover, #menu li a:focus {
 	background: url('./../image/menuItem.png') repeat-x;
}
/* CONTENT ************************************************************/
#content {
 padding: 10px;
 padding-top: 20px;
 clear: both;
 background: white;
}
#content-left,#content-right {
 width: 49%;
 margin: 0;
 background: white;
}
/* CONTENT-LEFT *******************************************************/
#content-left {
 float: left;
}
/* CONTENT-RIGHT ******************************************************/
#content-right {
 float: right;
}
/* SEARCH *************************************************************/
#search{
 padding-top: 5px;
 clear: both;
 margin: 0 0 10px 0; border-top: 1px solid white;
 margin: 0;
}
#search fieldset {
  margin: 0;
  border: 0;
  background: 0;
}
#search fieldset p {
  margin: 7px 0;
}
#search fieldset input[type="text"]{
  float: left;
  width: 50%;
  margin-right: 10px;
  border: none;
}
#search select {
  float: left;
  width: 140px;
  border: none;
}
#search fieldset input[type="submit"] {
  float: right;
}
/* BOOK LIST **********************************************************/
#bookList {
 width: 100%;
}
#bookList tr {
 border: 0;
}

/* BOOK BOX ***********************************************************/
#topBook, #newBook {
  width: 100%;
  margin-bottom: 10px;
  padding: 0 0 5px 0;
}
#topBook h3, #newBook h3 {
 font-size: 16px;
 padding: 2px 20px;
 margin: 0;
}
#topBook li, #newBook li {
 margin: 5px;
}
#topBook a, #newBook a {
 color: black;
 text-decoration: none;	
}
#topBook a:hover, #newBook a:hover, #topBook a:focus, #newBook a:focus {
 color: white;
 background: #006600;
}
/* TOP BOOK ***********************************************************/
#topBook {
 border-right: 1px solid #27344d;
 border-bottom: 5px solid #27344d;
}
#topBook h3 {	
 color: #27344d;
}
/* NEW BOOK ***********************************************************/
#newBook {
 border-right: 1px solid #bf5726;
 border-bottom: 5px solid #bf5726;
}
#newBook h3 {
 color: #bf5726;
}
/* BOOK INFO **********************************************************/
#bookInfo {
 
}
#bookInfo h1 {
 padding: 0;
}
#bookInfo h2  {
 font-size: 16px;
}
/* OPINION ************************************************************/
#opinion h2, #opinion h3 {
 font-size: 16px;
}
#opinion .content {
 background: #d2f2b7;
 padding: 10px; 
}
#opinion .change, #opinion .change a {
 font-size: 16px;
}
#opinion .change {
 text-align: right;
 padding-right: 20px;
}
/* TAG LIST ***********************************************************/
#tagList {
 background: #d2f2b7;
 margin: 0 0 10px 0;
 padding: 10px;
 text-align: justify;
 line-height: 1.5em;
}
#tagList h3 {
 font-size: 16px;
 text-align: right;
 padding: 2px 20px;
 margin: -10px -10px 10px -10px;
 
}
#tagList a {
 margin-right: 5px;
 margin-left: 5px;
 font-weight: bold;
}
#tagList .tag1 { font-size: 110% }
#tagList .tag2 { font-size: 120% }
#tagList .tag3 { font-size: 130% }
#tagList .tag4 { font-size: 140% }
#tagList .tag5 { font-size: 150% }
#tagList .tag6 { font-size: 160% }
#tagList .tag7 { font-size: 170% }
#tagList .tag8 { font-size: 180% }
#tagList .tag9 { font-size: 190% }
#tagList .tag10 { font-size: 200% }	

#tagList a {
 color: #006600;
 text-decoration: none;	
}
#tagList a:hover, #tagList a:focus {
 color: white;
 background: #006600;
}
#addTagForm fieldset {
 background: #5f9f40;
 margin-top: -10px;
 margin-bottom: 30px;
}
#addTagForm input[type="text"] {
 border: none;
 width: 50%;
 float: left;
}
#addTagForm input[type="submit"] {
 float: right;
}
/* USER LIST **********************************************************/
#userList {
 border-right: 1px solid black;
 border-bottom: 5px solid black;
 margin: 0 0 10px 0;
 padding: 10px;	
}
#userList h3 {
 font-size: 16px;
 padding: 2px 10px;
 margin: -10px -10px 10px -10px;
 color: black;
}
#userList a {
 margin-right: 10px;
 margin-left: 10px;
 font-weight: bold;
 font-size: 1.2em;
 text-decoration: none;
}
/* COMMENT ************************************************************/
.comment {
 margin-top: 10px;
}
.comment img.gravatar {
 border: 20px solid #badad9;
 width: 40px;
 margin-bottom: 0;
}
.comment .info {
 font-size: 80%;
 float: right;
}
.comment .number + .comment .author, .comment .homepage, .comment .date, .comment .admin {
 margin-left: 10px; 
}
.comment a.number {
 font-weight: bold;
 font-size: 1.5em;
}
.comment .author {
 font-weight: bold;
}
.comment .content {
 clear: both;
 margin: 0;
 background: #badad9;
 padding: 10px;
}
/* USER ***************************************************************/
#user #info {
 padding: 10px;
 background: #badad9;
 margin-bottom: 10px;
}
#user .makeFavourite, #user .makeFavourite a, #user .destroyFavourite, #user .destroyFavourite a {
 font-size: 16px;
}
#user .makeFavourite, #user .destroyFavourite {
 text-align: right;
 padding-right: 20px;
}
#user h1 {font-size: 16px}
#user h1 a {font-size: 200%}
.otherBook, .otherBook a {
 font-size: 16px;
}
#user h6 {
 float: left;
 margin-right: 30px;
}
.otherBook {
 text-align: right;
 padding-right: 20px;
 font-size: 140%;
}
/* PAGE ***************************************************************/
#page {
 margin: 10px 0;
 background: #d2f2b7;
}
#backward, #forward {
 display: block;
 font-size: small;
}
#backward {
 float: left;
}
#forward {
 float: right;	
}
/* FOOTER *************************************************************/
#footer {
  clear: both;
  height: 50px;
  width: 100%;
  margin: 20px 0 0 0;
  font-size: small;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  border-top: 1px dashed black;
}
/* ALERT **************************************************************/
.alert {
 border: 3px solid red;
 padding: 10px;
 margin: 10px;
}